<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI Viewer</title>
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/static/cdn/unpkg.com/element-theme-dark@1.0.2/lib/index.css">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css?v=1.0">

</head>
<body>
    <div
        id="app"
        v-loading="isConnecting || isDumping"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.7)">

        <div class="header">
            <div style="margin-right: 20px;">
                <span style="font-weight: bold; font-size: 20px;">UI Viewer</span>
                <span>{{version}}</span>
            </div>
            <el-select
              v-model="platform"
              placeholder="Select Platform"
              style="margin-right: 10px; width: 140px"
              @change="initPlatform">
              <el-option label="HarmonyOS" value="harmony"></el-option>
              <el-option label="Android" value="android"></el-option>
              <el-option label="iOS" value="ios"></el-option>
            </el-select>
  
            <el-select
              v-model="serial"
              placeholder="Select Device"
              style="margin-right: 20px; width: 250px"
              @visible-change="listDevice">
              <el-option
                v-for="d in devices"
                :key="d"
                :label="d"
                :value="d">
              </el-option>
            </el-select>

            <el-tooltip v-if="platform === 'ios'" content="Set WDA url, such as http://localhost:8100" placement="top">
              <el-input
                class="custom-input"
                v-model="wdaUrl"
                style="width: 180px; margin-right: 20px;"
                placeholder="WDA server url">
              </el-input>
            </el-tooltip>

            <el-tooltip v-if="platform === 'ios'" content="Set the maximum depth for iOS dump hierarchy, default value is 30" placement="top">
              <el-input
                class="custom-input"
                v-model="snapshotMaxDepth"
                style="width: 110px; margin-right: 20px;"
                placeholder="maxDepth">
              </el-input>
            </el-tooltip>


            <el-button 
              :disabled="isConnecting"
              style="margin-right: 10px; width: 100px;"
              v-on:click="connectDevice">
              <span v-if="isConnecting" class="el-icon-loading"></span>
              <span v-else>{{ isConnected ? 'Connected' : 'Connect' }}</span>
            </el-button>

            <el-tooltip
              v-if="!isConnected"
              content="Please connect device first"
              placement="top">
              <el-button 
                :disabled="!isConnected || isDumping"
                style="margin-right: 10px; width: 160px;">
                <span>Dump Hierarchy</span>
              </el-button>
            </el-tooltip>

            <el-button 
              v-else :disabled="isDumping"
              style="margin-right: 10px; width: 160px;"
              v-on:click="screenshotAndDumpHierarchy">
              <span 
                v-if="isDumping"
                class="el-icon-loading">
              </span>
              <span>Dump Hierarchy</span>
            </el-button>
    
            <div style="flex: 1;"></div> <!-- 占据剩余空间 -->
            <el-link
              class="custom-link"
              href="https://github.com/codematrixer/ui-viewer"
              target="_blank"
              :underline="false">GitHub
            </el-link>

        </div>
        <div class="main">
            <div class="left">
                <canvas id="screenshotCanvas"></canvas>
                <canvas id="hierarchyCanvas"></canvas>
            </div>
            <div class="center" :style="{ width: centerWidth + 'px' }">
                <p class="region-title">Selected Element Info</p>
                <el-table
                  :data="selectedNodeDetails"
                  style="width: 100%"
                  class="custom-table">
                  <el-table-column prop="key" label="Key" width="30%"></el-table-column>
                  <el-table-column label="Value" width="70%">
                    <template slot-scope="scope">
                      <code style="padding: 0 5px;">{{ scope.row.value }}</code>
                      <el-button
                        class="el-button attr-button"
                        @click="copyToClipboard(scope.row.value)">复制
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
            <div
              class="divider" 
              @mousedown="startDrag" 
              @mouseenter="hoverDivider" 
              @mouseleave="leaveDivider"
              :class="{ 'divider-hover': isDividerHovered, 'divider-dragging': isDragging }">
            </div>

            <div class="right">
                <p class="region-title">UI hierarchy
                </p>
                <el-input
                  class="custom-input"
                  placeholder="Search for ..."
                  style="margin-left: 10px;"
                  v-model="nodeFilterText">
                </el-input>
                <el-tree
                    class="custom-tree"
                    ref="treeRef"
                    :data="treeData"
                    :props="defaultTreeProps"
                    @node-click="handleTreeNodeClick"
                    node-key="_id"
                    default-expand-all
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode">
                </el-tree>
            </div>
        </div>
    </div>
    
    <script src="/static/cdn/code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="/static/cdn/cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="/static/cdn/unpkg.com/element-ui/lib/index.js"></script>
    <script type="module" src="/static/js/index.js"></script> 
</body>
</html>